import React, { useContext, useEffect, useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  FlatList,
  Alert,
} from "react-native";
import TestQuesContext from "../../context/preparation/TestQuesContext";
import TestQuesCard from "../../components/preAdmin/TestQuesCard";
import NoData from "../../components/preAdmin/NoData";

const AddQuesInTest = ({ navigation, route }) => {
  const { originQues, setQuestions } = route.params;
  const { testQuesLists } = useContext(TestQuesContext);

  const newQuestions = testQuesLists.filter((item) => {
    return !originQues.some((oitem) => item._id === oitem._id);
  });

  const [customList, setCustomList] = useState([]);
  const [choosedList, setChoosedList] = useState([]);

  useEffect(() => {
    let isMounted = true;
    if (isMounted) {
      if (newQuestions) {
        let newQueationsNow = newQuestions;
        newQueationsNow.map((item) => {
          item.checked = false;
        });
        setCustomList(newQueationsNow);
      }
    }

    return () => {
      isMounted = false;
    };
  }, []);

  const onPressItem = (_id) => {
    let customListNow = [...customList];

    for (const item in customListNow) {
      if (customListNow[item]._id === _id) {
        if (customListNow[item].checked === false) {
          customListNow[item].checked = true;
          let itemChoosed = customListNow[item];

          setChoosedList([...choosedList, itemChoosed]);
        } else {
          customListNow[item].checked = false;
          let choosedListNow = choosedList.filter((item) => item._id !== _id);

          setChoosedList(choosedListNow);
        }
      }
    }
    setCustomList(customListNow);
  };

  const onConfirm = () => {
    if (choosedList.length === 0) {
      Alert.alert("提示", "你未选择任何题目");
    } else {
      Alert.alert("提示", "你确定添加这些题目吗？", [
        {
          text: "取消",
          onPress: () => callback(),
        },
        {
          text: "确定",
          onPress: () => {
            setQuestions(originQues.concat(choosedList));
            navigation.goBack();
          },
        },
      ]);
    }
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={customList}
        ListEmptyComponent={<NoData />}
        keyExtractor={(item, index) => {
          return index.toString();
        }}
        renderItem={({ item, index }) => (
          <TestQuesCard
            index={index}
            item={item}
            isAdd={true}
            onPressItem={onPressItem}
          />
        )}
      />
      <View style={styles.buttonGroup}>
        <TouchableOpacity
          style={styles.cancelButton}
          onPress={() => navigation.goBack()}
        >
          <Text style={styles.cancelText}>取消</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.confirmButton}
          onPress={() => onConfirm()}
        >
          <Text style={styles.confirmText}>确定</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    backgroundColor: "#f5f5f5",
    flex: 1,
  },
  buttonGroup: {
    flexDirection: "row",
    justifyContent: "space-around",
    padding: 5,
  },
  confirmButton: {
    flex: 2,
    borderRadius: 5,
    margin: 10,
    padding: 10,
    backgroundColor: "#3ABEF0",
    alignItems: "center",
    justifyContent: "center",
    elevation: 2, //设置阴影角度，通过这个设置有无阴影
    shadowColor: "gray", // 设置阴影色
  },
  confirmText: {
    fontSize: 16,
    color: "#fff",
    fontWeight: "bold",
  },
  cancelButton: {
    flex: 1,
    borderRadius: 5,
    margin: 10,
    padding: 10,
    borderColor: "#3ABEF0",
    borderWidth: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  cancelText: {
    fontSize: 16,
    color: "#3ABEF0",
    fontWeight: "bold",
  },
});

export default AddQuesInTest;
